<template>
    <!-- 页面布局card通用组件 -->
    <PageCard>
      <!-- 头部工具栏 -->
      <ToolBar>
        <el-row :gutter="24">
          <el-col :span="24" class="barMarginBottom">
            <el-button v-show="$btnPermission.verify('RoleAdd')" type="primary" :loading="loading" @click="addRole">新增</el-button>
          </el-col>
        </el-row>
      </ToolBar>

      <!-- 数据表格 -->
      <TablePage ref="roleTablePage" :customTableHeight="255" :loading.sync="loading" :table-data="roleTableDatas" :columns="columns" @reloadData="loadTableData"/>

      <!-- 新增 -->
      <AddRole ref="addRole" :title.sync="addRoleTitle" :showDialog.sync="addRoleVisible" :rowId.sync="rowId" @reloadData="loadTableData"/>
    </PageCard>
</template>
<script>
import PageCard from '@/components/PageCard/index.vue'
import ToolBar from '@/components/ToolBar/index.vue'
import TablePage from '@/components/TablePage/index.vue'

import AddRole from './components/addRole.vue'

import { rolePage } from '@/api/role'

export default {
  name: 'RolePage',
  components: {
    PageCard,
    ToolBar,
    TablePage,
    AddRole
  },
  data() {
    return {
      loading: false,
      addRoleTitle: null,
      addRoleVisible: false,
      roleTableDatas: [],
      rowId: null,
      columns:[{
        title: '角色名称',
        name: 'roleName',
        align: 'center',
        width: 150
      }, {
        title: '备注',
        name: 'remark',
        align: 'center',
        width: 250
      }, {
        title: '排序',
        name: 'sort',
        align: 'center',
        width: 100
      }, {
        title: '操作',
        name: 'operate',
        width: 250,
        align: 'center',
        operate: [{
          name: '编辑',
          permission: 'EditRole',
          fun: this.editRole,
          customStyle: {
            'margin-left': '10px'
          }
        }]
      }]
    }
  },
  created(){
    this.$nextTick(()=>{
      this.loadTableData()
    })
  },
  methods: {
    // 加载数据
    async loadTableData(){
      this.loading = true
      const {pageNumber, pageSize} = this.$refs.roleTablePage.page
      const res = await rolePage({pageNumber, pageSize})
      this.$refs.roleTablePage.page.pageNumber = res.data.pageNumber
      this.$refs.roleTablePage.page.pageSize = res.data.pageSize
      this.$refs.roleTablePage.page.total = res.data.total
      this.roleTableDatas = res.data.rows
      this.loading = false
    },

    // 新增
    addRole(){
      this.addRoleTitle = '新增'
      this.addRoleVisible = true
    },

    // 编辑
    editRole(row){
      if(!row) return

      this.rowId = row.id
      this.addRoleTitle = '编辑'
      this.addRoleVisible = true
    }
  }
}
</script>
<style lang="scss" scoped>

</style>